<template>
	<view>
		<view class="alldiv">
			<view class="headdiv">
				<cover-image class="back" @click="returns" src="@/static/image/arrow-left.png"></cover-image>
				<!-- <map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map> -->
				<!-- <view id="map" class="map" tabindex="0"></view> -->
			</view>

			<view class="bodydiv">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="title">
						{{ language.FreeRide.xcxycg }}
					</view>
					<view class="wait-data">
						{{ language.FreeRide.suggest }}<text
							class="time">{{ lastTime }}</text>{{ language.FreeRide.suggestAfterText }}
					</view>
				</view>

				<!-- 司机信息 -->
				<view class="driver-info">
					<view class="profile-photo mr10">
						<u-avatar :size="44" :src="driverInfo.headPortrait || profilePhoto"></u-avatar>
					</view>
					<view class="driver-name mr10">{{ driverInfo.name }}</view>
					<!-- <view class="license-plate mr10">粤A·123456</view> -->
					<view class="vehicle-info">
						{{ driverInfo.carModel }}
					</view>
					<view class="left">
						<a :href="'tel:' + driverInfo.mobile" class="contact-driver" v-show="driverInfo.mobile">
							<u-icon :name="dialPhoto"></u-icon>
						</a>
						<a href="tel:10086" class="contact-driver">
							<u-icon :name="messagePhoto"></u-icon>
						</a>
					</view>
				</view>

				<!-- 帮助 -->
				<view class="other-use">
					<view class="other-use-item" v-for="(item,i) in otherUseList" :key="item.id" @click="optionFun(item.id)">
						<u-icon :name="item.icon"></u-icon>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>

				<view class="imagediv">
				  <u-swiper
						height="80"
						radius="67"
						circular
						:list="bannerList"
						keyName="picture"
				  >
				  </u-swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getDriverInfo, cancelOrder, getTaxiOrder, getDriverLocation, getBannerList } from '@/api/driver'
	// import GoogleMap from "@/mixins/GoogleMap";
	export default {
		// mixins: [GoogleMap],
		data() {
			return {
				language: {},
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: "../../../static/location.png",
					},
					{
						latitude: 39.9,
						longitude: 116.39,
						iconPath: "../../../static/location.png",
					},
				],
				profilePhoto: require('@/static/image/BankCard.png'),
				dialPhoto: require('@/static/image/dial.png'),
				messagePhoto: require('@/static/image/message.png'),
				otherUseList: [{
						id: 0,
						icon: require('@/static/image/seek-help.png'),
						name: '紧急求助',
					},
					{
						id: 1,
						icon: require('@/static/image/phone.png'),
						name: '修改手机',
					},
					{
						id: 2,
						icon: require('@/static/image/service.png'),
						name: '客服中心',
					},
					{
						id: 3,
						icon: require('@/static/image/cancel.png'),
						name: '取消行程',
					}
				],
				orderId: 0,
				driverId: 0,
				driverInfo: {},
				lastTime: '',
				intervalId: 0,
				bannerList: [],
			}
		},
		beforeDestroy() {
			// wssocket.close();
			this.intervalId && clearInterval(this.intervalId)
		},
		onLoad(option) {
			if (!option.id || !option.driverId) {
				this.returns()
			}
			this.orderId = option.id
			this.driverId = option.driverId
			this.getBannerList()
			this.getlanguagedata();
			this.getOrder(this.orderId)
			this.getDriver(option.driverId);
			if (option.planEndTime) {
				this.lastTime = this.convertDate(option.planEndTime)
			}
			this.driverLocation()
			this.intervalId = setInterval(this.driverLocation, 3000)
		},
		mounted() {
		},
		methods: {
			async getBannerList() {
					try{
						const res = await getBannerList({
							pageNo: 1,
							pageSize: 100,
							status: 0,
							name: 2
						})
						if(res.code === 0) {
							this.bannerList = res.data
						}
					}catch(e){
						console.log(e,666)
					}
			},
			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			goNext() {
				uni.navigateTo({
					url: `/pages/Home/freeRide/waitDeparture?id=${this.orderId}&driverId=${this.driverId}`,
				});
			},
			returns() {
				uni.switchTab({
					url: '/pages/Home/Home'
				})
			},
			// 获取订单信息
			getOrder(id) {
				try {
					getTaxiOrder({
						id
					}).then(res => {
						// this.driverInfo = res.data
						const startLatLng = {
							lat: parseFloat(res.data.startLatitude),
							lng: parseFloat(res.data.startLongitude)
						};
						//  模拟司机位置
						const endLatLng = {
							lat: parseFloat(res.data.endLatitude),
							lng: parseFloat(res.data.endLongitude)
						};
					})
				} catch (error) {
					console.log(error)
				}
			},
			// 获取司机信息
			getDriver(driverId) {
				try {
					getDriverInfo({id: driverId}).then(res => {
						this.driverInfo = res.data
					})
				} catch (error) {
					console.log(error)
				}
			},
			// 获取司机位置
			driverLocation() {
				getDriverLocation({
					driverld: this.driverId
				}).then(res => {
					if (res.data.x) {
						this.goNext()
					}
				})
			},
			// 最迟出发时间
			convertDate(dateString) {
				let today = new Date();
				let tomorrow = new Date();
				tomorrow.setDate(today.getDate() + 1);
				// 将时间设置为 00:00:00
				tomorrow.setHours(0, 0, 0, 0);
				const tomorrowTime = tomorrow.getTime() // 明天凌晨
				tomorrow.setDate(tomorrow.getDate() + 1)
				const tomorrowTime2 = tomorrow.getTime() // 后天凌晨
				const nowTime = new Date(dateString).getTime()

				const [datePart, timePart] = dateString?.split(' ');
				const [hours, minutes] = timePart?.split(':');
				if (nowTime < tomorrowTime) {
					return `${this.language.FreeRide.timeList[0]}${hours}:${minutes}`
				} else if (nowTime < tomorrowTime2) {
					return `${this.language.FreeRide.timeList[1]}${hours}:${minutes}`
				} else {
					return `${this.language.FreeRide.timeList[2]}${hours}:${minutes}`
				}
			},
			optionFun(id) {
				if (!this.orderId) return
				switch(id) {
					case 3:
						// 取消行程
						uni.showLoading({
							title: 'loading...'
						});
						try {
							cancelOrder({orderId: this.orderId, orderStatus: 3}).then(res => {
								uni.showToast({
									title: this.language.Takingataxi.orderCancelSuccess,
									icon: "none"
								});
								uni.hideLoading();
								uni.navigateTo({
									url: `/pages/Home/freeRide/tripCancellation?id=${this.orderId}`,
								});
							}).catch(error => {
								uni.hideLoading();
							});
						} catch (error) {
							uni.hideLoading();
							console.log(error)
						}
						break;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 100vh;
		display: flex;
  	flex-direction: column;

		.headdiv {
			position: relative;
			width: 100%;
			overflow: hidden;
			flex: 1;
			.map {
				// 隐藏选中时的div边框
				width: calc(100% + 4px);
				height: calc(100% + 4px);
				outline: none;
				margin: -2px 0 0 -2px;
			}
			.back {
				position: absolute;
				left: -40rpx;
				top: 100rpx;
				width: 160rpx;
				height: 120rpx;
				transform:scale(0.5)
			}
		}

		.bodydiv {
			max-height: 60vh;
			overflow-y: auto;
			box-shadow: 0px -3px 6px  rgba(6, 145, 161, 0.05);
			border-radius: 20px 20px 0 0;
			padding: 48rpx 32rpx;
			background-color: #fff;

			// 订单信息
			.order-info {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					color: rgba(56, 56, 56, 1);
				}

				.wait-data {
					font-size: 20rpx;
					line-height: 28rpx;
					color: rgba(153, 153, 153, 1);

					.time {
						color: rgba(47, 212, 184);
					}
				}
			}

			// 司机信息
			.driver-info {
				position: relative;
				margin-top: 24rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				color: #333;
				font-weight: bold;
				font-size: 28rpx;
				line-height: 40rpx;

				.profile-photo {
					width: 80rpx;
					height: 80rpx;
				}

				.left {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					align-items: center;

					.contact-driver {
						margin-left: 24rpx;
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text-decoration: none;
						border-radius: 50%;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.1);
						img {
							width: 24rpx;

						}

						&:last-child img {
							width: 28rpx;
						}
					}
				}
			}

			.mr10 {
				margin-right: 20rpx;
			}

			// 其他操作
			.other-use {
				display: flex;
				justify-content: space-between;

				.other-use-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 144rpx;
					height: 120rpx;
					border-radius: 8rpx;
					background: rgb(255, 255, 255);
					box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.1);

					.name {
						margin-top: 8rpx;
						color: rgba(102, 102, 102, 1);
						font-size: 24rpx;
						line-height: 32rpx;
					}

					.phoneImg {
						width: 11px;
					}
				}
			}

			.imagediv {
				margin-top: 16px;
			}
		}
	}
</style>